<!DOCTYPE html>
<html>
	<meta http-equiv="content-type" content="text/html;charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="css/default.css" />
	<script src="js/av-min-2.1.2.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jquery-1.6.4.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/base.js" type="text/javascript" charset="utf-8"></script>
	<style type="text/css">
		* {
			background: none repeat scroll 0 0 transparent;
			border: 0 none;
			margin: 0;
			padding: 0;
			vertical-align: baseline;
			font-family: 微软雅黑;
			overflow: hidden;
		}
		
		a {
			cursor: pointer;
		}
		
		#navi {
			width: 100%;
			position: relative;
			word-wrap: break-word;
			border-bottom: 1px solid #065FB9;
			margin: 0;
			padding: 0;
			height: 40px;
			line-height: 40px;
			vertical-align: middle;
			background-image: -moz-linear-gradient(top, #EBEBEB, #BFBFBF);
			background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #EBEBEB), color-stop(1, #BFBFBF));
		}
		
		#naviDiv {
			font-size: 14px;
			color: #333;
			padding-left: 10px;
		}
		
		#tips {
			margin-top: 10px;
			width: 100%;
			height: 40px;
		}
		
		#buttonGroup {
			padding-left: 10px;
			float: left;
			height: 35px;
		}
		
		.button {
			float: left;
			margin-right: 10px;
			padding-left: 10px;
			padding-right: 10px;
			font-size: 14px;
			width: 70px;
			height: 30px;
			line-height: 30px;
			vertical-align: middle;
			text-align: center;
			cursor: pointer;
			border-color: #77D1F6;
			border-width: 1px;
			border-style: solid;
			border-radius: 6px 6px;
			-moz-box-shadow: 2px 2px 4px #282828;
			-webkit-box-shadow: 2px 2px 4px #282828;
			background-image: -moz-linear-gradient(top, #EBEBEB, #BFBFBF);
			background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #EBEBEB), color-stop(1, #BFBFBF));
		}
		
		#mainContainer {
			padding-left: 10px;
			padding-right: 10px;
			text-align: center;
			width: 98%;
			font-size: 12px;
		}
		
		.bikeAdd {
			position: absolute;
			z-index: 100;
			width: 400px;
			height: 200px;
			left: 0px;
			right: 0px;
			top: 0px;
			bottom: 0px;
			margin: auto;
			background-color: rgba(227, 227, 227, 0.8);
			border: 1px solid #aaa;
			display: none;
		}
		
		.bikeAdd div {
			margin-top: 10px;
		}
		
		.bikeAdd label {
			display: block;
			margin-top: 45px;
			font-size: 18px;
			color: #555;
		}
		
		.bikeAdd input,
		.bikeAdd button {
			background-color: white;
			padding: 10px;
			cursor: pointer;
		}
		table tr:hover{
			background-color: rgba(178,178,178,0.7);
		}
	</style>

	<body>
		<div id="navi">
			<div id='naviDiv'>
				<span><img src="images/arror.gif" width="7" height="11" border="0" alt=""></span><span>&nbsp;车辆管理</span>&nbsp;
				<span><img src="images/arror.gif" width="7" height="11" border="0" alt=""></span><span>&nbsp;车辆列表</span>&nbsp;
			</div>
		</div>
		<div id="tips">
			<div id="buttonGroup">
				<div class="button" onmouseout="this.style.backgroundColor='';this.style.fontWeight='normal'" onmouseover="this.style.backgroundColor='#77D1F6';this.style.fontWeight='bold'">
					<a id="addBike">添加车辆号</a>
				</div>
				<!--<div class="button" onmouseout="this.style.backgroundColor='';this.style.fontWeight='normal'" onmouseover="this.style.backgroundColor='#77D1F6';this.style.fontWeight='bold'">
			<a>查找用户</a>
		</div>-->
			</div>
		</div>
		<div id="mainContainer">
			<div class="bikeAdd">
				<label>输入车辆号</label>
				<div>
					<input type="number" name="" id="bikeNumber" placeholder="请输入车牌号" />
					<button id="sure" style="background-color: rgba(2,131,197,1); color: white;">确定</button>
				</div>
			</div>
			<table class="default" width="100%">
				<col width="5%">
				<col width="20%">
				<col width="10%">
				<col width="10%">
				<col width="15%">
				<col width="10%">
				<col width="10%">
				<tr class="title">
					<td>序号</td>
					<td>车辆号</td>
					<td>是否已开锁</td>
					<td>是否已结算</td>
					<td>最后一次消费金额（元）</td>
					<td>支付金额累计（元）</td>
					<td>操作</td>
				</tr>
				<tr class="list" v-for="item in list">
					<td>{{$index+1}}</td>
					<td>{{item.bikeId}}</td>
					<td>{{item.bikeState}}</td>
					<td>{{item.payOr}}</td>
					<td>{{item.lastPay}}</td>
					<td>{{item.payCount}}</td>
					<td>
						<a v-on:click="remove(this)" id="delete">删除</a>
					</td>
				</tr>
			</table>
		</div>
	</body>

</html>
<script type="text/javascript">
	window.onload = function() {
		var APP_ID = 'hN1kSQf2DQ9awcJmwEmIIdVo-gzGzoHsz';
		var APP_KEY = 'aHCVjhhcyeerTEsKObkGSyd6';
		AV.init({
			appId: APP_ID,
			appKey: APP_KEY
		});
		var query = new AV.Query('bike_info');
		query.find().then(function(results) {
			for(var i = 0; i < results.length; i++) {
				obj = {
					id: results[i].id,
					bikeId: results[i].attributes.bikeId,
					bikeState: results[i].attributes.bikeState,
					lastPay: results[i].attributes.lastPay,
					payCount: results[i].attributes.payCount,
					payOr: results[i].attributes.payOr
				}
				vue.list.push(obj)
			}
			// 如果这样写，第二个条件将覆盖第一个条件，查询只会返回 priority = 1 的结果
		}, function(error) {});
	}
	var vue = new Vue({
		el: "body",
		data: {
			list: []
		},
		methods: {
			remove: function(index) {
				console.log(index.item);
				var todo = AV.Object.createWithoutData('bike_info', index.item.id);
				todo.destroy().then(function(success) {
					// 删除成功
					alert("删除成功")
				}, function(error) {
					// 删除失败
				});
			}
		}
	})
	//添加车辆开始
	$("#addBike").click(function() {
		$(".bikeAdd").attr("style", "display: block;")
	})
	$("#sure").click(function() {
		var bikeNumber = $("#bikeNumber").val();
		console.log(bikeNumber)
		if(bikeNumber.length == 6) {
			// 声明类型
			var User_info = AV.Object.extend('bike_info');
			// 新建对象
			var User_info = new User_info();
			// 设置车辆号
			User_info.set('bikeId', bikeNumber);
			// 设置租车状态
			User_info.set('bikeState', "未使用");
			// 设置支付状态
			User_info.set('payOr', "初始化");
			// 设置支付状态
			User_info.set('lastPay', "初始化");
			// 设置累计金额
			User_info.set('payCount', "0");
			User_info.save().then(function(todo) {
				alert('添加成功！');
				$(".bikeAdd").attr("style", "display: none;")
			}, function(error) {
				alert('添加失败');
			});
		} else {
			alert('车辆号定义为六位数，请重新输入')
		}

	})
	//添加车辆结束
</script>